<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<nz-layout style="margin: -24px -24px 16px;">
  <nz-layout class="inner-layout">
    <div id="notebookOuter">
      <nz-breadcrumb>
        <nz-breadcrumb-item>
          <!--<a [routerLink]="['/', 'workbench', 'home']">Home</a>-->
          <a>Home</a>
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
          <a [routerLink]="['/', 'workbench', 'notebook']">Notebook</a>
        </nz-breadcrumb-item>
      </nz-breadcrumb>
      <div>
        <br />
        <h2>Notebook</h2>
        <nz-content>Apache submarine support jupyter notebook.</nz-content>
        <br />
      </div>
    </div>
  </nz-layout>
  <div id="notebookDiv">
    <div nz-row>
      <div nz-col nzSpan="12">
        <h2>Notebook List</h2>
        <!--
        <label style="font-size: large; color: black;">Namespaces :</label>
        <nz-select disabled="disabled" style="margin-left: 5px; width: 240px;" [(ngModel)]="currentNamespace">
          <nz-option [nzValue]="currentNamespace" [nzLabel]="currentNamespace"></nz-option>
        </nz-select>
        -->
      </div>
      <div nz-col nzSpan="12" align="right">
        <nz-input-group nzSearch style="width: 300px; margin-right: 5px;" [nzAddOnAfter]="suffixIconButton">
          <input type="text" nz-input id="searchInput" placeholder="input search text" />
        </nz-input-group>
        <ng-template #suffixIconButton>
          <button nz-button nzType="primary" nzSearch><i nz-icon nzType="search"></i></button>
        </ng-template>
        <button
          id="btnNewNotebook"
          nz-button
          nzType="primary"
          style="margin-right: 5px;"
          (click)="initNotebookStatus()"
        >
          <i nz-icon nzType="plus"></i>
          New Notebook
        </button>
      </div>
    </div>
    <div>
      <nz-table id="notebookListTable" style="padding-top: 5px;" #basicTable [nzData]="allNotebookList">
        <thead>
          <tr>
            <th>Name</th>
            <th>Environment</th>
            <th>Docker Image</th>
            <th>Resources</th>
            <th>Status</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of basicTable.data; let i = index">
            <td>
              <a href="{{ data.url }}" target="_blank">{{ data.name }}</a>
            </td>
            <td>{{ data.spec.environment.name }}</td>
            <td>{{ data.spec.environment.dockerImage }}</td>
            <td>
              {{ data.spec.spec.resources }}
            </td>
            <td>{{ data.status }}</td>
            <td><a id="delete{{ i }}" (click)="deleteNotebook(data.notebookId)">Delete</a></td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</nz-layout>

<nz-modal
  [(nzVisible)]="isVisible"
  nzTitle="Create Notebook"
  [(nzOkText)]="okText"
  (nzOnCancel)="isVisible = false"
  [nzWidth]="700"
>
  <form nz-form [formGroup]="notebookForm" nzLayout="horizontal">
    <div *nzModalFooter>
      <button nz-button nzType="default" (click)="isVisible = false">Cancel</button>
      <button id="create-btn" nz-button nzType="primary" [disabled]="checkStatus()" (click)="handleOk()">
        Create
      </button>
    </div>
    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="notebookName">
          Notebook Name
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input required type="text" name="notebookName" id="notebookName" formControlName="notebookName" />
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="environment">
        Environment
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-select required name="select-envName" formControlName="envName">
          <nz-option
            *ngFor="let env of envNameList; let i; of: index"
            id="env{{ i }}"
            [nzValue]="env"
            [nzLabel]="env"
          ></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="cpus">
        CPU
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input min="0" required type="number" name="cpus" id="cpus" formControlName="cpus" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="gpus">
        GPU
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input min="0" type="number" name="gpus" id="gpus" formControlName="gpus" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="memoryNum">
        Memory
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <div nz-col nzSpan="6">
        <input nz-input required name="memoryNum" placeholder="EX:1024" formControlName="memoryNum" />
        </div>
        <div nz-col nzSpan="6" style="margin-left: 5px;">
          <nz-select formControlName="unit">
            <nz-option *ngFor="let unit of MEMORY_UNITS" [nzValue]="unit" [nzLabel]="unit"></nz-option>
          </nz-select>
        </div>
      </nz-form-control>
    </nz-form-item>
    <div formArrayName="envVars">
      <ng-container *ngFor="let envVar of envVars.controls; index as i">
        <nz-form-item>
        <nz-form-label nzRequired [nzSm]="6" [nzXs]="24">EnvVar{{ i+1 }}</nz-form-label>
        <div [formGroupName]="i">
          <div nz-col nzSpan="12">
            <input
              style="width: 30%;"
              nz-input
              required
              id="key{{ i }}"
              name="key{{ i }}"
              placeholder="Key"
              formControlName="key"
            />
            <input
              style="width: 60%; margin-left: 10px;"
              nz-input
              required
              id="value{{ i }}"
              name="value{{ i }}"
              placeholder="Value"
              formControlName="value"
            />
            <i
              nz-icon
              style="margin-left: 5px;"
              nzType="close-circle"
              nzTheme="fill"
              (click)="deleteItem(envVars, i)"
            ></i>
          </div>
        </div>
      </nz-form-item>
      </ng-container>
    </div>
    <button nz-button style="display: block; margin: auto;" id="envVar-btn" type="default" (click)="onCreateEnvVar()">
      New EnvVar
    </button>
  </form>
</nz-modal>
